<template>
    <el-row>
        <el-col>
            <el-card class="box-card" style="background-color: rgba(255, 255, 255,.5);border-radius: 2%">
                <!--                <div slot="header" class="clearfix">-->
                <!--                    <span>登录</span>-->
                <!--                </div>-->
                <el-tabs v-model="activeName" :stretch="true" >
                    <el-row justify="center" type="flex" class="row-bg" style="margin-bottom: 15px">
                        <el-col :span="12" offset="1">
                            <span style="font-size: 25px;font-family: 'Barlow Condensed'">电力巡检系统</span>
                        </el-col>
                    </el-row>
<!--                    <h1>电力巡检系统</h1>-->
<!--                    <el-page-header @back="goBack" content="电力巡检系统">-->
<!--                    </el-page-header>-->
                    <el-tab-pane label="账号密码登录" name="account">
                        <sb-account></sb-account>
                    </el-tab-pane>
                    <el-tab-pane label="手机动态码登录" name="phone">
                        <sb-phone></sb-phone>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
    import accountLogin from '@/components/login/AccountLogin.vue';
    import phoneLogin from '@/components/login/PhoneLogin.vue';

    export default {
        name: "LoginCard",
        data() {
            return {
                activeName: 'account'
            };
        },
        components: {
            sbAccount: accountLogin,
            sbPhone: phoneLogin
        }
    }
</script>

<style scoped>

</style>